<template>
  <div>
    <el-container>
      <el-header
          style="border-bottom: 1px solid #ccc; padding: 10px 0;margin-bottom: 20px;"
      >
        <el-row :gutter="10">
          <el-col
              :offset="3"
              :span="18"
              style="display: flex; align-items: center;justify-content: space-between;"
          >
            <img src="@/assets/logo.png" style="height: 30px;"  alt="logo"/>
            <el-input
                v-model="searchStr"
                placeholder="请输入博客的标题"
                style="width: 60%;"
                @keydown.native.enter="goBlogList"
            >
              <el-button slot="append" icon="el-icon-search" type="primary" @click="goBlogList"></el-button>
            </el-input>
            <el-dropdown v-if="permission" @command="handleSelectSetting">
              <el-avatar
                  :src="userData.avatar"
                  :title="userData.userName"
                  fit="scale-down"
                  shape="square"
              >
              </el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>{{userData.userName}}</el-dropdown-item>
                <el-dropdown-item command="setting">设置</el-dropdown-item>
                <el-dropdown-item command="signOut">登出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-link  href="login.html" type="primary" v-if="!permission">登录</el-link>
            <el-button  icon="el-icon-s-home" type="text" v-if="permission" @click="goChatHome">小树洞</el-button>
            <el-button  icon="el-icon-edit" type="text" v-if="permission" @click="goEditArticle">写文章</el-button>
            <el-button  icon="el-icon-s-data" type="text" v-if="permission && userData.isAdmin" @click="goAdmin">站点管理系统</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container style="width: 90%;margin: 0 auto">
        <el-aside width="300px" v-if="permission">
          <UserInfo :user-data="userData"></UserInfo>
        </el-aside>
        <el-main>
          <!--    内容区域      -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="广场" name="article">
              <Community></Community>
            </el-tab-pane>
            <el-tab-pane label="我的文章" name="myself">
              <MyBlog></MyBlog>
            </el-tab-pane>
            <el-tab-pane label="喜欢" name="like">
              <MyLikeBlog></MyLikeBlog>
            </el-tab-pane>
            <el-tab-pane label="评论" name="comment">
              <MyComment></MyComment>
            </el-tab-pane>
            <el-tab-pane label="关注" name="attention">
              <MyAttentions></MyAttentions>
            </el-tab-pane>
            <el-tab-pane label="黑名单" name="blacklist">
              <MyBlacklist></MyBlacklist>
            </el-tab-pane>
          </el-tabs>

        </el-main>

      </el-container>
      <el-dialog
          title="更新用户信息"
          :visible.sync="isShowSetting"
          width="60%"
      >
        <UserSetting></UserSetting>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import AuthorService from "@/service/authorService"
import UserInfo from "@/pages/user/components/UserInfo";
import Community from "@/pages/user/components/Community";
import MyBlog from "@/pages/user/components/MyBlog";
import MyLikeBlog from "@/pages/user/components/MyLikeBlog";
import MyComment from "@/pages/user/components/MyComment";
import MyAttentions from "@/pages/user/components/MyAttentions.vue";
import MyBlacklist from "@/pages/user/components/MyBlacklist.vue";
import defaultConfig from "@/config/config.default";
import UserSetting from "@/pages/user/components/UserSetting.vue";
export default {
  name: "Home",
  components:{
    UserInfo,
    Community,
    MyBlog,
    MyLikeBlog,
    MyComment,
    MyAttentions,
    MyBlacklist,
    UserSetting
  },
  data(){
    return{
      permission:false,
      searchStr: '',
      userData: {

      },
      activeName:"article",
      isShowSetting:false
    }
  },
  created() {
    AuthorService.checkUserPermission().then(rs=>{
      if(rs.data.status===200){
        this.permission=true
        this.userData=rs.data.data.userData
        this.isAdmin = this.userData.isAdmin;
        //本地存储信息
        sessionStorage.removeItem('userData')
        sessionStorage.setItem('userData',JSON.stringify(rs.data.data.userData))

      }else {
        //跳转login
        window.location.replace(`${defaultConfig.hostname}/login.html`);
      }
    })
    this.activeName = this.$route.params.module?this.$route.params.module:'article'
  },
  methods:{
    goAdmin(){
      window.location.replace(`${defaultConfig.hostname}/admin.html`)
    },
    goEditArticle(){
      this.$router.push('/editArticle')
    },
    handleClick(tab){

      this.$router.push(`/home/${tab.name}`)
    },
    handleSelectSetting(command){
      switch (command){
        case "setting":
          this.isShowSetting = !this.isShowSetting;
          break;
        case "signOut":
          this.signOut();
          break;
      }
    },
    signOut() {
      sessionStorage.removeItem('Authorization');
      window.location.replace(`${defaultConfig.hostname}/login.html`)
    },
    goChatHome(){
      this.$router.push(`/chathome`)
    },
    goBlogList(){
      if (this.searchStr){
        this.$router.push(`/bloglist/${this.searchStr}`)
      }else {
        this.$message.warning("请输入查询的内容")
      }
    }
  }
}
</script>

<style scoped>

</style>